<template>
  <section class="book">
    <mt-header :title="book.bookname">
      <mt-button slot="left" @click="$router.go(-1)">
        <i class="fa fa-angle-left"></i>
      </mt-button>
    </mt-header>
    <div class="content">
      <div class="box">
        <div class="img" :style="{backgroundImage:'url(file/download?filId='+book.img+')'}"></div>
        <div class="info">
          <b>{{book.bookname}}</b>
          <p class="text-light">分类：{{book.typeName}}</p>
          <p class="text-light">作者：{{book.author}}</p>
          <p class="text-light">{{book.isbn}}</p>
          <div class="options">
            <mt-button type="primary" size="small" @click="download" v-if="book.fileId">免费下载</mt-button>
            <mt-button type="default" size="small" @click="comment">我要点评</mt-button>
          </div>
        </div>
      </div>
      <div>
        <mt-navbar v-model="selected" value="1">
          <mt-tab-item id="1">简介</mt-tab-item>
          <mt-tab-item id="2">评论</mt-tab-item>
        </mt-navbar>

        <!-- tab-container -->
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
            {{book.remark}}
            <div v-if="!book.remark">无</div>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <div class="review" v-for="(r,idx) in reviewList" :key="idx">
              <img :src="'file/download?filId='+r.headImage" :onerror="errorHeadImg">
              <div class="review-box">
                <div class="review-head">
                  <span>{{r.userName}}</span>
                  <span>{{r.createTime | date('yyyy-MM-dd')}}</span>
                </div>
                <p>{{r.value}}</p>
              </div>
            </div>
            <div v-if="reviewList.length===0">无</div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
  </section>
</template>

<script>
import { Toast, MessageBox } from 'mint-ui';
import date from '@/filters/date';

export default {
  name: 'book',
  props: [],
  data() {
    return {
      user: {},
      book: {
        //     "id": 1,
        //     "bookname": "how to be a 程序猿",
        //     "isbn": "？？？",
        //     "img": "https://img3.doubanio.com/lpic/s1953384.jpg",
        //     "author": "lxt",
        //     "remark": "备注信息备注信息备注信息备注信息备注信息",
        //     "submitUserId": "2",
        //     "submitUserName": "aaa",
        //     "typeId": "1",
        //     "typeCode": "1",
        //     "state": "checkIn"
      },
      reviewList: [
        // {
        //   "id": 1,
        //   "bookId": 2,
        //   "userId": 2,
        //   "createTime": null,
        //   "value": "有毒吧",
        //   "userName": "aaa",
        //   "headImage": "1"
        // }
      ],
      selected: '1',
      errorHeadImg: `this.src="${require('../assets/img/default-head.png')}"`

    }
  },
  methods: {
    getBook() {
      this.$http.postParams('book/detail', {
        id: this.$route.params.id
      }).then((data) => {
        if (data.code === 0) {
          this.book = data.data
        } else {
          Toast(data.msg)
        }
      })
    },
    getReviewList() {
      this.$http.postParams('review/getReviewList', {
        bookId: this.$route.params.id
      }).then((data) => {
        if (data.code === 0) {
          this.reviewList = data.data
        } else {
          Toast(data.msg)
        }
      })
    },
    comment() {
      this.$CheckUser().then(() => {
        MessageBox.prompt(' ', '请输入评论内容').then(({ value, action }) => {
          this.sendComment(value)
        }).catch(() => { });
      })
    },
    sendComment(msg) {
      this.$http.postObj('review/saveReview', {
        "bookId": this.book.id,
        "userId": this.user.id,
        "value": msg
      }).then((data) => {
        data.code === 0 && this.getReviewList()
      })
    },
    download() {
      this.$CheckUser().then(() => {
        this.book.fileId && (location.href = `${__FILESERVER__}file/download?filId=${this.book.fileId}`)
      })
    }
  },
  components: {},
  filters: { date },
  watch: {},
  mounted() {
    this.user = UT.getSessionJson('CUR_USER')
    this.getBook()
    this.getReviewList()
  }
}
</script>

<style lang="less">
@import "../assets/less/app.variable.less";

.book {
  .box {
    display: flex;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #fff;
    &:nth-child(n + 1) {
      border-bottom: 1px solid @borderColor;
    }
    .img {
      background-image: url("../assets/img/default-img.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      width: 100px;
      height: 144px;
    }
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-left: 10px;
      .options {
        display: flex;
        justify-content: space-between;
        .mint-button {
          width: 47%;
        }
      }
    }
  }
  .review {
    display: flex;
    padding: 10px 0;
    &:nth-child(n + 2) {
      border-top: 1px solid @borderColor;
    }
    img {
      width: 35px;
      height: 35px;
      border-radius: 100%;
    }
    .review-box {
      flex: 1;
      padding: 0 15px;
      font-size: 1.5rem;
    }
    .review-head {
      flex: 1;
      display: flex;
      justify-content: space-between;
      color: @textLighten;
      margin-bottom: 10px;
    }
  }
  .mint-navbar .mint-tab-item {
    border-bottom: 3px solid @borderColor;
    &.is-selected {
      margin-bottom: 0;
      border-bottom: 3px solid #26a2ff;
    }
  }
  .mint-tab-container-wrap {
    padding: 10px;
    background-color: #fff;
  }
}
</style>
